<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div>
			<input type="button" id="" value="游戏" onclick="getNews('youxi')" />
			<input type="button" id="" value="娱乐" onclick="getNews('yule')" />
			<input type="button" id="" value="科技" onclick="getNews('keji')" />
			<input type="button" id="" value="汽车" onclick="getNews('qiche')" />
			<input type="button" id="" value="头条" onclick="getNews('top')" />
			<input type="button" id="" value="国际" onclick="getNews('guoji')" />
		</div>
		<div class="content">

		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		function getNews(msg) {
			$.ajax({
				type: "get",
				url: "data/"+msg+".json",
				async: true,
				success: function(result) {
					var news = result.result.data;
					$(".content").html("");
					news.forEach(function(item) {
						console.log(item)
						var title = "<a href='" + item.url + "'><h1>" + item.title + "</h1></a>";
						var dates = "<p>" + item.date + "</p>";
						var imgs = "<img src = '" + item.thumbnail_pic_s + "' />";
						$(".content").append(title + dates + imgs);
					})
				}
			});
		}
		
		getNews("top");
	</script>

</html>